<template>
  <view class="parking-fee-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">停车费缴费</view>
      <view class="header-subtitle">缴纳停车费、充电费</view>
    </view>

    <!-- 车辆信息 -->
    <view class="vehicle-info">
      <view class="section-title">
        <text class="title-text">我的车辆</text>
        <text class="vehicle-count">({{ vehicles.length }})</text>
      </view>
      
      <view class="vehicle-list">
        <view 
          v-for="vehicle in vehicles" 
          :key="vehicle.id" 
          class="vehicle-item"
          @click="selectVehicle(vehicle)"
        >
          <view class="vehicle-icon" :style="{ background: vehicle.iconColor }">
            <u-icon :name="vehicle.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="vehicle-info">
            <view class="vehicle-header">
              <text class="vehicle-plate">{{ vehicle.plateNumber }}</text>
              <text class="vehicle-type">{{ vehicle.type }}</text>
            </view>
            <view class="vehicle-details">
              <text class="vehicle-parking">{{ vehicle.parkingSpace }}</text>
              <text class="vehicle-status">{{ vehicle.status }}</text>
            </view>
          </view>
          <view class="vehicle-action">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 待缴费账单 -->
    <view class="pending-bills">
      <view class="section-title">
        <text class="title-text">待缴费账单</text>
        <text class="title-count">({{ pendingBills.length }})</text>
      </view>
      
      <view class="bill-list">
        <view 
          v-for="bill in pendingBills" 
          :key="bill.id" 
          class="bill-item"
          @click="goToBillDetail(bill)"
        >
          <view class="bill-icon" :style="{ background: bill.iconColor }">
            <u-icon :name="bill.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="bill-info">
            <view class="bill-header">
              <text class="bill-title">{{ bill.title }}</text>
              <text class="bill-amount">¥{{ bill.amount.toFixed(2) }}</text>
            </view>
            <view class="bill-details">
              <text class="bill-period">{{ bill.period }}</text>
              <text class="bill-due-date">到期：{{ bill.dueDate }}</text>
            </view>
            <view class="bill-status">
              <u-tag 
                :text="bill.statusText" 
                :type="bill.statusType" 
                size="mini"
              ></u-tag>
            </view>
          </view>
          <view class="bill-action">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 充电桩状态 -->
    <view class="charging-status">
      <view class="section-title">
        <text class="title-text">充电桩状态</text>
      </view>
      
      <view class="charging-grid">
        <view 
          v-for="station in chargingStations" 
          :key="station.id"
          class="charging-item"
          @click="goToCharging(station)"
        >
          <view class="charging-icon" :style="{ background: station.statusColor }">
            <u-icon :name="station.icon" color="#fff" size="24"></u-icon>
          </view>
          <text class="charging-name">{{ station.name }}</text>
          <text class="charging-status-text">{{ station.statusText }}</text>
        </view>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="payment-methods">
      <view class="section-title">
        <text class="title-text">支付方式</text>
      </view>
      
      <view class="methods-grid">
        <view 
          v-for="method in paymentMethods" 
          :key="method.id"
          class="method-item"
          @click="selectPaymentMethod(method)"
        >
          <view class="method-icon" :style="{ background: method.color }">
            <u-icon :name="method.icon" color="#fff" size="24"></u-icon>
          </view>
          <text class="method-name">{{ method.name }}</text>
        </view>
      </view>
    </view>

    <!-- 缴费统计 -->
    <view class="payment-stats">
      <view class="section-title">
        <text class="title-text">缴费统计</text>
      </view>
      
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.totalPaid.toFixed(2) }}</text>
          <text class="stat-label">累计缴费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.parkingCount }}</text>
          <text class="stat-label">停车费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.chargingCount }}</text>
          <text class="stat-label">充电费</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 停车费缴费页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @description 停车费缴费功能页面，包含车辆信息、停车费账单、充电桩状态等
 */

import { ref, reactive, onMounted } from 'vue'

// 车辆信息
const vehicles = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    type: '小型汽车',
    parkingSpace: 'A区-001号',
    status: '正常',
    icon: 'car',
    iconColor: '#2ed573'
  },
  {
    id: 2,
    plateNumber: '京B67890',
    type: '新能源车',
    parkingSpace: 'B区-002号',
    status: '充电中',
    icon: 'car',
    iconColor: '#3742fa'
  }
])

// 待缴费账单
const pendingBills = ref([
  {
    id: 1,
    title: '2025年1月停车费',
    amount: 80.00,
    period: '2025年1月',
    dueDate: '2025-01-25',
    statusText: '待缴费',
    statusType: 'warning',
    icon: 'car',
    iconColor: '#2ed573'
  },
  {
    id: 2,
    title: '2024年12月充电费',
    amount: 45.50,
    period: '2024年12月',
    dueDate: '2025-01-20',
    statusText: '已逾期',
    statusType: 'error',
    icon: 'flash',
    iconColor: '#ff9500'
  }
])

// 充电桩状态
const chargingStations = ref([
  {
    id: 1,
    name: 'A区充电桩1',
    statusText: '空闲',
    statusColor: '#27ae60',
    icon: 'flash'
  },
  {
    id: 2,
    name: 'A区充电桩2',
    statusText: '使用中',
    statusColor: '#f39c12',
    icon: 'flash'
  }
])

// 支付方式
const paymentMethods = ref([
  {
    id: 1,
    name: '微信支付',
    icon: 'wechat',
    color: '#07c160'
  },
  {
    id: 2,
    name: '支付宝',
    icon: 'alipay',
    color: '#1677ff'
  }
])

// 缴费统计
const stats = reactive({
  totalPaid: 960.50,
  parkingCount: 8,
  chargingCount: 4
})

// 页面跳转方法
const selectVehicle = (vehicle) => {
  uni.showToast({
    title: `选择车辆：${vehicle.plateNumber}`,
    icon: 'none'
  })
}

const goToBillDetail = (bill) => {
  uni.navigateTo({
    url: `/pages/payment/detail?billId=${bill.id}&type=parking`
  })
}

const goToCharging = (station) => {
  uni.navigateTo({
    url: `/pages/parking/charging?stationId=${station.id}`
  })
}

const selectPaymentMethod = (method) => {
  uni.showToast({
    title: `选择${method.name}`,
    icon: 'none'
  })
}

// 页面加载
onMounted(() => {
  loadParkingFeeData()
})

// 数据加载方法
const loadParkingFeeData = async () => {
  try {
    console.log('加载停车费数据')
  } catch (error) {
    console.error('加载停车费数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.parking-fee-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px 0;
  
  .header-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    font-size: 14px;
    color: #666;
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
  
  .title-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .title-count,
  .vehicle-count {
    font-size: 14px;
    color: #999;
  }
}

.vehicle-info,
.pending-bills,
.charging-status,
.payment-methods,
.payment-stats {
  margin-bottom: 24px;
}

.vehicle-list {
  .vehicle-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .vehicle-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .vehicle-info {
      flex: 1;
      min-width: 0;
      
      .vehicle-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .vehicle-plate {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .vehicle-type {
          font-size: 12px;
          color: #666;
          background: #f8f9fa;
          padding: 2px 8px;
          border-radius: 10px;
        }
      }
      
      .vehicle-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .vehicle-parking,
        .vehicle-status {
          font-size: 12px;
          color: #666;
        }
      }
    }
    
    .vehicle-action {
      margin-left: 16px;
    }
  }
}

.bill-list {
  .bill-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .bill-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .bill-info {
      flex: 1;
      min-width: 0;
      
      .bill-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .bill-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .bill-amount {
          font-size: 18px;
          font-weight: 700;
          color: #ff4757;
        }
      }
      
      .bill-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .bill-period,
        .bill-due-date {
          font-size: 12px;
          color: #666;
        }
      }
      
      .bill-status {
        display: flex;
        justify-content: flex-start;
      }
    }
    
    .bill-action {
      margin-left: 16px;
    }
  }
}

.charging-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  
  .charging-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .charging-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .charging-name {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      text-align: center;
    }
    
    .charging-status-text {
      font-size: 12px;
      color: #666;
    }
  }
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  
  .method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .method-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .method-name {
      font-size: 12px;
      color: #333;
      text-align: center;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: #2ed573;
      margin-bottom: 8px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
